import React, {memo,useEffect,useState} from 'react';
import { renderRoutes } from 'react-router-config';
import { NavLink } from 'react-router-dom';
import { useLocation } from 'react-router';
import './buttom.css';
import { connect } from 'react-redux';
// import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon';
import {setIndex} from '../../store/action';
import './icon.css'


const Bottom = (props) => {
    // route 为router组件的 自动来的值
    let { route,index,setIndexDispatch } = props;
    //在页面渲染前 就首先获取url
    const  {pathname} = useLocation()
    // const [num,setNum] = useState(0)
    const paths = ["/home/home","/home/community","/home/match","/home/shopping","/home/my"] 
    //然后根据页面的url,找到对应的index , 来判断tabbar 哪边改高亮
    index = paths.findIndex(item =>  item=== pathname);
    // const { pathname}  = useLocation()
    // // 根据用户直接访问的处理, 非首页
    // index = route.routes.findIndex(
    //         item => item.path == pathname) - 1
    return (
        <>
        {renderRoutes(route.routes)}
        <ul className="tab">
            <li
                className='tab-button'
                onClick={()=>{setIndexDispatch(0)}}
                key='0'
                >
                    <NavLink to="/home/home">
                        <div className='together'style={index===0?{color:"#c6291c"}:{color:'#585858'}}>
                        <div className=' iconfont icon-shandianfahuo' ></div>
                        <div>
                            首页
                        </div>
                        </div>     
                    </NavLink>
            </li>
            <li 
                className='tab-button'
                onClick={()=>{setIndexDispatch(1)}}
                key='1'
                >
                    <NavLink to="/home/community">
                    <div className='together' style={index===1?{color:"#c6291c"}:{color:'#585858'}}>
                        <div className=' iconfont icon-shequ'></div>
                        <div>
                            社区
                        </div>
                        </div>   
                    </NavLink>
            </li>
            <li
                className='tab-button'
                onClick={()=>{setIndexDispatch(2)}}
                key='2'
                >
                    <NavLink to="/home/match">
                    <div className='together' style={index===2?{color:"#c6291c"}:{color:'#585858'}}>
                        <div className=' iconfont icon-saishi'></div>
                        <div>
                            赛事
                        </div>
                        </div>   
                    </NavLink>

            </li>
            <li
                className='tab-button'
                onClick={()=>{setIndexDispatch(3)}}
                key='3'
                >
                    <NavLink to="/home/shopping">
                    <div className='together' style={index===3?{color:"#c6291c"}:{color:'#585858'}}>
                        <div className=' iconfont icon-shangcheng'></div>
                        <div>
                            商城
                        </div>
                        </div>   
                    </NavLink>
            </li>
            <li
                className='tab-button'
                onClick={()=>{setIndexDispatch(4)}}
                key='4'
                >
                    <NavLink to="/home/my">
                    <div className='together' style={index===4?{color:"#c6291c"}:{color:'#585858'}}>
                        <div className=' iconfont icon-wodedamaijihuo'></div>
                        <div>
                            我的
                        </div>
                        </div>   
                    </NavLink>
            </li>
        </ul>             
        </>
    )
}

const mapStateToProps = (state) => {
    return {
        index: state.global.index
    }
}
// setIndex   changeIndex
// 1. dispatch能力 
// 2. 返回值是一个对象

const mapDispatchToProps = (dispatch) => {
    return {
        setIndexDispatch(index) {
            //action的方法setIndex 传给reducer
            dispatch(setIndex(index))
        }
    }
}
export default connect(mapStateToProps, 
    mapDispatchToProps)(memo(Bottom))